<template>
    <div class="pictureorlight">



        <el-col :span="17" class="leftcard">

            <span class="title">图卡配置及使用</span>

            <div class="cardall overflow-x-hidden">
                <div class="card_list" v-for="(o, indexcard) in card_all" :key="indexcard"
                    :class="{ active: activeIndex === indexcard, cardchoose: clickedIndex === indexcard }"
                    @click="setActive(indexcard)">
                    <div class="card_img">
                        <img :src="baseUrl + o['image']" class="image">

                    </div>
                    <div class="card_title">
                        <span>{{ o['card_name'] }}</span>
                    </div>
                </div>
            </div>
            <div class="foot">
                <el-button class="my_class" @click="GetCardOne(card_all[activeIndex])">
                    修改图卡
                </el-button>
                <el-button icon="el-icon-video-play" @click="GoHomeImage" class="my_class">
                    图卡回仓
                </el-button>

                <el-button class="my_class_primary" @click="SwitchImage(card_all[activeIndex]['id'])">切换图卡
                </el-button>
            </div>
        </el-col>
        <el-col :span="7" class="rightlight">
            <div class="light_list">
                <span class="title_name">图卡补光光源</span>

                <span class="span_light">控制灯光:</span>
                <div class="radio_class">
                    <el-radio v-model="start_light_id" label='5' >QC
                    </el-radio>

                    <el-radio v-model="start_light_id" label='4'>透射灯箱
                    </el-radio>
                    <el-radio v-model="start_light_id" label='10'>CCXL
                    </el-radio>
                </div>
                <span class="span_light">色温(2300-9999K):</span>
                <div v-if="start_light_id == '4' || start_light_id == '10'">
                    
                    <input placeholder="色温(0-9999K)" :max=10000 :min=0  v-model="start_light_cct" type="number"
                        >
                </div>
                <div v-if="start_light_id === '5'">
                    <div class="radio_class">
                        <el-radio v-model="start_light_cct" label="FL1">FL1
                        </el-radio>

                        <el-radio v-model="start_light_cct" label="FL2">FL2
                        </el-radio>
                        <el-radio v-model="start_light_cct" label="FL3">FL3
                        </el-radio>
                        <el-radio v-model="start_light_cct" label="HALO">A
                        </el-radio>

                        <el-radio v-model="start_light_cct" label="HZ">H
                        </el-radio>
                        <el-radio v-model="start_light_cct" label="UV">UV
                        </el-radio>
                    </div>
                </div>
                <div v-if="start_light_cct!='HALO' && start_light_cct!='HZ' &&  start_light_cct!='UV'">
                    <span class="span_light">照度等级(0-9999):</span>
                    <input v-model="start_light_lux" placeholder="照度等级(0-9999)" :max=9999 :min=0  type="number"
                       >
                </div>
               



                <div class="button_list">
                    <el-button class="btn move" icon="el-icon-video-play" type="success" @click="light_start">
                        开启光源
                    </el-button>
                    <el-button class="btn default" icon="el-icon-video-pause" type="danger" @click="light_stop">
                        关闭光源
                    </el-button>
                    <!-- <el-button class="btn" icon="el-icon-video-pause" type='primary' @click="is_lightcreate = true">
                        添加配置
                    </el-button>

                    <el-button class="btn" icon="el-icon-video-pause" type='warning' @click="get_com">
                        查询com口
                    </el-button> -->
                </div>


                <!-- <div class="span_list">



                    <span class="span_tite">其它配置</span>
                    <span>帧率测试仪左右移动:手动</span>
                    <span>眩光点光源左右移动:手动</span>
                    <span>双点光源移动:手动</span>
                    <span>景深图卡:手动</span>
                </div> -->



            </div>


        </el-col>


        <!-- <el-dialog title="添加灯光配置" :visible.sync="is_lightcreate" :before-close="handleClose_is_lightcreate" width="40%">
            <el-form>
                <el-form-item label="添加光源选项:" :label-width="formLabelWidth">
                    <el-radio :label="0" v-model="light_select">图卡补光灯</el-radio>
                    <el-radio :label="1" v-model="light_select">天空散射灯</el-radio>
                    <el-radio :label="2" v-model="light_select">太阳点光源</el-radio>
                </el-form-item>
                <el-form-item label="配置名称:" :label-width="formLabelWidth">
                    <el-input v-model="start_light.username"></el-input>
                </el-form-item>
                <el-form-item label="照度:" :label-width="formLabelWidth">
                    <el-input v-model="start_light.lux"></el-input>
                </el-form-item>
                <el-form-item label="色温:" :label-width="formLabelWidth" v-if="light_select !== 2">
                    <el-input v-model="start_light.cct"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="is_lightcreate = false">取 消</el-button>
                <el-button type="primary" @click='Create_light' v-if="light_select == 0">确 定</el-button>
                <el-button type="primary" @click='Create_Sky_light' v-if="light_select == 1">确 定</el-button>
                <el-button type="primary" @click='Create_Sun_light' v-if="light_select == 2">确 定</el-button>
            </div>
        </el-dialog> -->
        <!--    修改图卡配置-->
        <el-dialog title="修改图卡" :visible.sync="is_update_card" :before-close="handleClose_is_update_card" width="30%">
            <el-form>
                <el-form-item label="图卡名称:" :label-width="formLabelWidth">
                    <el-input v-model="card_one.pictrue_name"></el-input>
                </el-form-item>
                <el-form-item label="卡槽:" :label-width="formLabelWidth">


                    <el-select v-model="card_one.sort" placeholder="请选择">
                        <el-option v-for="item in sort" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图片地址:" :label-width="formLabelWidth">
                    <el-input v-model="card_one.picture_url" style="width: 200px;"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="is_update_card = false">取 消</el-button>
                <el-button type="primary" @click='update_card'>确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeIndex: 0,
            indexcard: 0,
            start_light_lux: 0,
            clickedIndex: -1,
            lightcode: '若灯光无法开启请重新连接光源',
            is_update_card: false,
            formLabelWidth: "120",
            is_lightcreate: false,
            light_select: 0,
            light: {
                'username': '',
                'lux': '',
                'cct': '',
                'eight': '',
                'nine': '',
            },
            start_light_cct:'',
            start_light_id:'5',
            card_one: {
                'id': '',
                'pictrue_name': '',
                'is_sort': '',
                'sort': '',
                'picture_url': '',
            },
            sort: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
            currentDate: new Date(),
            card_all: '',
            baseUrl: this.$settings.BASE_URL_CMS + "media",
        };
    },
    created() {
        this.GetCard()
    },
    methods: {
        setActive(index) {
            this.activeIndex = index;
        },
        // 获取当前图卡
        get_at_present_card() {
            this.$axios.get(this.$settings.BASE_URL_CMS + `CMS-Card/Card-Guide/GetCardCurrent/`).then((res) => {
                console.log('GetCardCurrent',)
                if (res.data.code == 100) {
                    console.log(res.data.data)
                    this.clickedIndex = res.data.data - 1
                } else {
                    this.$message.error(res.data.msg);
                }
            })

        },

        update_card() {
            console.log('update_card')
            this.$axios.put(this.$settings.BASE_URL_CMS + `JiaLiang_Guide/JiaLiangCard/${this.card_one.id}/`, {
                'card_name': this.card_one.pictrue_name,
                'card_slot': this.card_one.sort,
                'image': this.card_one.picture_url,

                'JiaLiang_Description': 1
            }).then((res) => {
                if (res.data.code == 100) {
                    this.GetCard()
                    this.is_update_card = false
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                }
            })
        },
        GetCardOne(all) {
            this.card_one.id = all.id
            this.card_one.pictrue_name = all.card_name
            this.card_one.sort = all.card_slot
            this.card_one.picture_url = all.image
            this.is_update_card = true

        },
        handleClose_is_lightcreate(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {
                });
        },
        handleClose_is_update_card(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {
                });
        },
        // 获取当前图卡
        GetCard() {
            this.$axios.get(this.$settings.BASE_URL_CMS + `JiaLiang_Guide/JiaLiangCard`).then((res) => {
                if (res.data.code == 100) {
                    this.card_all = res.data.data
                    this.get_at_present_card()
                }
                else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        // 开灯
        light_start() {
            if (this.start_light_id==5){
                this.$axios.post(this.$settings.BASE_URL_CMS + `JiaLiang_Light/qclight/OpenLight/`,{'brightness':this.start_light_lux,'sec_name':this.start_light_cct}).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.data.msg);
                }
            })
            }else{
                this.$axios.post(this.$settings.BASE_URL_CMS + `JiaLiang_Light/ccxllight/OpenLight/`,{'brightness':this.start_light_lux,'sec_name':this.start_light_cct,'light_id':this.start_light_id}).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.data.msg);
                }
            })
            }
           

          
        },
        // // 连接光源
        // LightInit() {
        //     this.$axios.get(this.$settings.BASE_URL_CMS + `lightauto/lightinit/`).then((res) => {
        //         if (res.data.code == 100) {
        //             this.lightcode = res.data.msg
        //         } else {
        //             this.lightcode = res.data.msg
        //         }
        //     })
        // },
        // // 断开连接
        // LightBreak() {
        //     this.$axios.get(this.$settings.BASE_URL_CMS + `lightauto/lightbreak/`).then((res) => {
        //         if (res.data.code == 100) {
        //             this.lightcode = res.data.msg
        //         } else {
        //             this.lightcode = res.data.msg
        //         }
        //     })
        // },
        // 关灯
        light_stop() {
            if (this.start_light_id==5){
            this.$axios.get(this.$settings.BASE_URL_CMS + `JiaLiang_Light/qclight/OFFLight/`).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.data.msg);
                }
            })}else{ this.$axios.get(this.$settings.BASE_URL_CMS + `JiaLiang_Light/ccxllight/OFFLight/`).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.data.msg);
                }
            })

            }
        },
        // 获取com口
        get_com() {
            this.$axios.get(this.$settings.BASE_URL_CMS + `Ccxl/opencom/`).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.data,
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        // 添加太阳点光源
        Create_Sun_light() {
            this.$axios.post(this.$settings.BASE_URL_CMS + `PL1C05/PL1C05List/`, {
                'PL1C05_username': this.start_light.username,
                'PL1C05_lux': parseInt(this.start_light.lux),
            }).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    this.is_lightcreate = false
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        // 添加天空散射光源
        Create_Sky_light() {
            this.$axios.post(this.$settings.BASE_URL_CMS + `Ccxl/SkyLightList/`, {
                'sky_username': this.start_light.username,
                'sky_lux': parseInt(this.start_light.lux),
                'sky_cct': parseInt(this.start_light.cct),
            }).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    this.is_lightcreate = false
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        Create_light() {
            this.$axios.post(this.$settings.BASE_URL_CMS + `Ccxl/LightList/`, {
                'username': this.start_light.username,
                'lux': parseInt(this.start_light.lux),
                'cct': parseInt(this.start_light.cct),
            }).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    this.is_lightcreate = false
                } else {
                    this.$message.error(res.data.msg);
                }
            }).catch(res.data.msg)
        },
        // 切换图卡
        SwitchImage(id) {
            this.clickedIndex = id - 1; // 更新点击的项目索引
            this.$axios.post(this.$settings.BASE_URL_CMS + `JiaLiang_Guide/card/SetChartSwitch/`, { 'card_id': id }).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        GoHomeImage() {
            this.$axios.get(this.$settings.BASE_URL_CMS + `JiaLiang_Guide/card/SetChartBackHome/`).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                }
            })
        }
    }
}
</script>

<style lang="less">
.el-message-box {
    background-color: #161D26;
    border: #1F2935;
}

.el-dialog {
    background-color: #1F2935;

    .el-form-item__content .el-radio {
        margin-left: @w *15vw;
        // margin-right: @w *15vw;
    }

}

.el-radio__label {
    color: #fff;
}

.el-dialog__title {
    color: #fff;
}

.el-form-item__content {
    display: flex;

    .el-radio {
        margin-top: @h*15vh;
        margin-left: @w *20vw;
    }

    .el-form-item__label {
        width: @w *115vw;
    }

    .el-input {


        // padding: 0;
        .el-input__inner {
            background-color: #161D26;
            border: none;
            color: #fff;


        }


    }
}

.pictureorlight {
    width: 100%;
    height: 100%;
    float: left;

    .leftcard {
        .foot {
            display: flex;
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
            // float: left;
            height: @h*60vh;
            width: @w *1186vw;
            background-color: #1F2935;
            position: absolute;
            bottom: 0;
            left: @w *240vw;

            .my_class {
                float: right;
                height: @h*40vh;
                width: auto;
                padding: 0 @w *10vw;
                background-color: #161D26;
                margin: 0 0 0 @w *10vw;
                border: 0;
                color: #fff;
            }

            .my_class_primary {
                float: right;
                height: @h*40vh;
                width: auto;
                padding: 0 @w *10vw;
                background-color: #0081FF;
                margin: 0 0 0 @w *10vw;
                color: #fff;
                border: 0;
            }
        }

        background-color: #161D26;
        height: 100%;

        .title {
            width: @w*120vw;
            height: @h*70vh;
            font-weight: 700;
            font-size: @h*25vh;
            color: #FFFFFF;
            line-height: @h*90vh;
            text-align: left;

            margin-left: @w*20vw;
        }

        .overflow-x-hidden {
            overflow-x: hidden !important;
        }

        .cardall {
            height: 76%;
            overflow: auto;

            .active {
                border: 1px solid #0081FF !important;

                .card_title {
                    background-color: #0081FF !important;
                }
            }

            .cardchoose {
                border: 1px solid #00B42A !important;

                .card_title {
                    background-color: #00B42A !important;
                }
            }

            .card_list {
                width: @w*220vw;
                height: @h*250vh;
                margin: 0 0 @h*20vh @w*13vw;
                background: #1F2935;

                display: inline-block;
                border: 1px solid #1F2935;

                .card_img {
                    height: @h*200vh;
                }

                .image {
                    // height: @h*180vh;
                    width: @w*220vw;
                    height: @h*200vh;

                }

                .card_title {
                    width: @w*220vw;
                    height: @h*33vh;
                    // line-height: @h*50vh;
                    font-size: @h*20vh;
                    color: #fff;
                    letter-spacing: @h*1vh;
                    // margin-top: 0 !important;
                    padding-top: @h*17vh;
                    text-align: center;
                    float: left;
                    background: rgba(130, 145, 169, 0.1);
                }
            }
        }
    }

    .rightlight {
        background-color: #1F2935;
        height: 100%;
        border-left: 1px solid #8291A9;

        .light_list {
            width: 100%;

            .title_name {
                width: 100%;
                float: left;
                height: @h*70vh;
                line-height: @h*90vh;
                font-size: @h*30vh;
                margin: 0 @w*20vw;
            }

            .span_light {
                width: 100%;
                float: left;
                height: @h*30vh;
                line-height: @h*30vh;
                font-size: @h*16vh;
                margin: @h*10vh @w*20vw;
            }

            .span_list {
                float: left;
                margin: @h*10vh @w*20vw;
                width: 100%;

                .span_tite {
                    width: @w*450vw;
                    margin: @h*20vh 0 @h*10vh;
                    float: left;
                    font-size: @h*25vh;
                    color: #fff;
                    // height: @h*50vh;


                }

                span {
                    width: @w*450vw;
                    margin-top: @h*10vh ;
                    float: left;
                    font-size: @h*20vh;
                    color: #8291A9;

                }
            }

            .button_list {
                float: left;


                margin: @h*10vh @w*20vw;

                .el-button {
                    height: @h*50vh;
                    line-height: @h*50vh;
                    margin: @h*10vh;
                    @w*15vw;
                    width: @w*160vw;
                    padding: 0 @w*15vw;
                }
            }

            .radio_class {
                width: 100%;
                float: left;
                height: @h*50vh;
                margin: @h*10vh 0 0 @w*20vw;

                .el-radio {
                    margin-right: @w*15vw;
                }
            }

            input {
                width: @w*400vw;
                float: left;
                height: @h*40vh;
                background-color: #161D26;
                margin: 0 0 @h*10vh @w*20vw;
                color: #fff;
                padding-left: @w*5vw;

            }
        }
    }
}
</style>
